<template>
	<view class="bd-authentication">
		<view class="bd-item dir-left-nowrap cross-center">
			<image src="./image/phone.png" class="bd-label box-grow-0"></image>
			<input class="bd-input box-grow-1" v-model="phone" placeholder="请输入用户ID" type="number" maxlength="11">
		</view>
		<view class="bd-item dir-left-nowrap cross-center">
			<image src="./image/message.png" class="bd-label box-grow-0"></image>
			<input class="bd-input box-grow-1" v-model="sms_captcha" placeholder="请输入短消息验证码" type="text">
			<view v-if="!isSend" class="bd-btn box-grow-0" @click="getVerCode">获取验证码</view>
			<view v-else class="bd-btn box-grow-0 bd-send">重新发送{{ timeNum }}S</view>
		</view>
		<view class="bd-item dir-left-nowrap cross-center">
			<image src="./image/prize.png" class="bd-label box-grow-0"></image>
			<input class="bd-input box-grow-1" v-model="prize" placeholder="请输入转账金额" type="digit">
		</view>
		<view class="bd-bottom" :class="agree ? 'bd-yes-agree' : 'bd-no-agree'" @click="sign">确认转账</view>
		
		<view style="margin-top: 28rpx; font-size: 28rpx; color: red;">
			{{detail}}
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		name: "transfer",
		data() {
			return {
				phone: '',
				sms_captcha: '',
				prize: '',
				isSend: false,
				timeNum: 60,
				timeIng: 0,
				
				detail: '',
			}
		},
		computed: {
			// 控制确认按钮
			agree: function() {
				if (this.phone && this.sms_captcha && this.prize) {
					return true;
				} else {
					return false;
				}
			},
		},
		
		mounted() {
			this.transferDetail();
		},
		
		methods: {
			transferDetail: function() {
				this.$request({
					url: this.$api.user.transfer_detail,
					method: "post",
				}).then(res => {
					this.detail = res.data;
				});
			},
			
			// 获取验证码
			getVerCode: function() {
				this.timeNum = 60;
				this.$request({
					url: this.$api.user.phone_code,
					method: "get",
					data: {
						mobile: this.phone,
					}
				}).then(response => {
					if (response.code === 0) {
						this.isSend = true;
						this.change();
						uni.showToast({
							icon: 'none',
							title: '已发送验证码'
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: response.msg
						});
					}
				});
			},
			change: function() {
				clearInterval(this.timeIng);
				this.timeIng = setInterval(() => {
					this.timeNum--;
					if (this.timeNum === 0) {
						clearInterval(this.timeIng);
						this.isSend = false;
					}
				}, 1000);
			},
			
			// 提交
			sign: function() {
				if (!this.agree) return;
				
				this.$request({
					url: this.$api.user.check_user,
					method: "get",
					data: {
						user_id: this.phone
					}
				}).then(response => {
					if (response.code === 0) {
						uni.showModal({
							title: '提示',
							content: '确定向'+response.data+'转账吗？',
							showCancel: true,
							cancelText: '取消',
							confirmText: '确认',
							success: res => {
								if (res.confirm) {
									let data = {
										code: this.sms_captcha, // 验证码
										phone: this.phone,
										amount: this.prize, // 金额
									}
									this.$request({
										url: this.$api.user.transferNew,
										method: "post",
										data: data
									}).then(response => {
										if (response.code === 0) {
											uni.showToast({
												icon: 'none',
												title: '转账成功'
											});
											uni.navigateBack();
										} else {
											uni.showToast({
												icon: 'none',
												title: response.msg
											});
										}
									});
								}
								
							},
							fail: () => {},
							complete: () => {}
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: response.msg
						});
					}
				});
				
				
				
				
				
				
				
			}
		},
		
		// 销毁定时器
		beforeDestroy() {
			clearInterval(this.timeIng);
		},
	}
</script>

<style scoped>
	.bd-authentication {
		min-height: 100vh;
		background: #FFFFFF;
		padding: 46upx 42upx;
	}

	.bd-iphone {
		width: 110upx;
		height: 110upx;
		margin-top: 54upx;
	}

	.bd-iphone-text {
		font-size: 32upx;
		font-weight: bold;
		color: #333333;
		margin-top: 60upx;
	}

	.bd-prompt {
		font-size: 26upx;
		color: #999999;
		margin-top: 35upx;
	}

	.bd-content {
		border-bottom: 2upx solid #f4f4f4;
		padding-bottom: 65upx;
	}

	.bd-item {
		height: 100upx;
		border-bottom: 2upx solid #f4f4f4;
	}

	.bd-label {
		width: 36upx;
		height: 36upx;
		margin: 0 25upx 0 2upx;
	}

	.bd-btn {
		border-left: 1upx solid #f4f4f4;
		width: 226upx;
		height: 53upx;
		line-height: 53upx;
		font-size: 32upx;
		color: #ff4544;
		text-align: center;
	}

	.bd-image {
		width: 160upx;
		height: 67upx;

	}

	.bd-input {
		height: 36upx;
	}

	.bd-bottom {
		height: 88upx;
		line-height: 88upx;
		color: #ffffff;
		font-size: 36upx;
		border-radius: 44upx;
		margin-top: 68upx;
		text-align: center;
	}

	.bd-yes-agree {
		background: rgba(255, 69, 68, 1);
	}

	.bd-no-agree {
		background: rgba(255, 69, 68, 0.5);
	}

	.bd-agree-group {
		margin-top: 42upx;
	}

	.bd-color {
		font-size: 28upx;
		color: #ff4544;
	}
</style>